<template>
	<view>
		<uni-nav-bar title="设备保养" left-icon="gear" background-color="rgb(61, 126, 255)" color="#fff"></uni-nav-bar>
		<view class="box">
			<h3>芯片机器-设备1</h3>
			<p>地址：1号楼-1车间-201设备</p>
			<p>监测数值:1257895</p>
			<p>IP地址：192.168.5.101</p>
			<button type="warn" size="mini" class="btn" v-if="show">离线</button>
			<!-- <button type="warn" size="mini" class="btn blue" v-if="!show">在线</button> -->
		</view>
		<view class="box">
			<h3>芯片机器-设备2</h3>
			<p>地址：1号楼-1车间-202设备</p>
			<p>监测数值:1257895</p>
			<p>IP地址：192.168.5.102</p>
			<button type="warn" size="mini" class="btn blue">在线</button>
		</view>
		<view class="box">
			<h3>芯片机器-设备3</h3>
			<p>地址：1号楼-1车间-203设备</p>
			<p>监测数值:1257895</p>
			<p>IP地址：192.168.5.103</p>
			<button type="warn" size="mini" class="btn">在线</button>
		</view>
		<view class="box">
			<h3>芯片机器-设备4</h3>
			<p>地址：1号楼-1车间-205设备</p>
			<p>监测数值:1257895</p>
			<p>IP地址：192.168.5.105</p>
			<button type="warn" size="mini" class="btn blue">在线</button>
		</view>
		<view class="box">
			<h3>芯片机器-设备3</h3>
			<p>地址：1号楼-1车间-203设备</p>
			<p>监测数值:1257895</p>
			<p>IP地址：192.168.5.103</p>
			<button type="warn" size="mini" class="btn">在线</button>
		</view>
		<view class="box">
			<h3>芯片机器-设备4</h3>
			<p>地址：1号楼-1车间-205设备</p>
			<p>监测数值:1257895</p>
			<p>IP地址：192.168.5.105</p>
			<button type="warn" size="mini" class="btn blue">在线</button>
		</view>
		<view class="box">
			<h3>芯片机器-设备3</h3>
			<p>地址：1号楼-1车间-203设备</p>
			<p>监测数值:1257895</p>
			<p>IP地址：192.168.5.103</p>
			<button type="warn" size="mini" class="btn">在线</button>
		</view>
		<view class="box">
			<h3>芯片机器-设备4</h3>
			<p>地址：1号楼-1车间-205设备</p>
			<p>监测数值:1257895</p>
			<p>IP地址：192.168.5.105</p>
			<button type="warn" size="mini" class="btn blue">在线</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			toggleShow() {
				this.show = !this.show;
			}
		}
	}
</script>

<style>
	.box {
		width: 90%;
		margin: 35rpx auto;
		border-radius: 7px;
		background-color: #fff;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.2);
		padding: 20px;
		box-sizing: border-box;
		position: relative;
	}

	.box h3 {
		padding: 5rpx 0 10rpx;
	}

	.box p {
		padding: 5px 0;
	}

	.btn {
		position: absolute;
		top: 30rpx;
		right: 50rpx;
		border-radius: 15px;
	}

	.blue {
		background-color: rgb(85, 170, 255);
	}
</style>